import {
  StyleSheet,
  SafeAreaView,
  ScrollView,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from "@/constants/Colors";
import { useState } from "react";
import { Carousel } from "@/components/Carousel";

const categories = [
  "数码",
  "乳制品",
  "女装",
  "生鲜",
  "母婴",
  "男装",
  "家居用品",
  "运动户外",
  "家装",
  "个护清洁",
  "箱包",
  "生活服务",
];

const subCategories = [
  {
    title: "为你推荐",
    items: ["卫衣", "防晒衣", "太平鸟"],
  },
  {
    title: "热门品牌",
    items: ["运动装", "休闲裤", "优衣库"],
  },
];

// 计算左侧菜单宽度
const MENU_WIDTH = 80; // 固定宽度为80像素

// 添加轮播图数据
const bannerImages = [
  "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
  "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
  "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
];

// 1. 添加搜索历史和品类推荐
const categoryRecommends = {
  popular: ["手机", "电脑", "耳机"],
  seasonal: ["夏季新品", "防晒必备", "清凉好物"],
};

// 2. 完善分类数据结构
interface SubCategory {
  id: number;
  name: string;
  image: string;
}

interface Category {
  id: number;
  name: string;
  icon: React.ReactNode;
  subCategories: SubCategory[];
}

// 3. 添加品牌专区
const brandZone = {
  title: "品牌专区",
  brands: [
    { id: 1, name: "Apple", logo: "url" },
    { id: 2, name: "华为", logo: "url" },
    // ...
  ],
};

export default function CategoryScreen() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <SafeAreaView style={styles.safeArea}>
      <ThemedView style={styles.container}>
        {/* 搜索栏 */}
        <View style={styles.header}>
          <View style={styles.searchBar}>
            <ThemedText style={styles.searchText}>请输入搜索内容</ThemedText>
          </View>
        </View>

        <View style={styles.content}>
          {/* 左侧分类列表 */}
          <View style={styles.leftMenuContainer}>
            <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
              {categories.map((category, index) => (
                <TouchableOpacity
                  key={index}
                  style={[
                    styles.menuItem,
                    activeIndex === index && styles.menuItemActive,
                  ]}
                  onPress={() => setActiveIndex(index)}
                  activeOpacity={0.7}
                >
                  <ThemedText
                    style={[
                      styles.menuText,
                      activeIndex === index && styles.menuTextActive,
                    ]}
                    numberOfLines={2}
                  >
                    {category}
                  </ThemedText>
                </TouchableOpacity>
              ))}
            </ScrollView>
          </View>

          {/* 右侧内容区 */}
          <ScrollView style={styles.rightContent}>
            {/* Banner */}
            <Carousel images={bannerImages} height={150} borderRadius={8} />

            {/* 分类内容 */}
            {subCategories.map((section, sectionIndex) => (
              <View key={sectionIndex} style={styles.section}>
                <View style={styles.sectionHeader}>
                  <ThemedText style={styles.sectionTitle}>
                    {section.title}
                  </ThemedText>
                </View>
                <View style={styles.sectionContent}>
                  {section.items.map((item, itemIndex) => (
                    <View key={itemIndex} style={styles.sectionItem}>
                      <Image
                        source={{
                          uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
                        }}
                        style={styles.itemImage}
                      />
                      <ThemedText style={styles.itemText}>{item}</ThemedText>
                    </View>
                  ))}
                </View>
              </View>
            ))}
          </ScrollView>
        </View>
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  container: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  header: {
    padding: 10,
    backgroundColor: Colors.background.primary,
  },
  searchBar: {
    backgroundColor: Colors.background.secondary,
    height: 36,
    borderRadius: 18,
    justifyContent: "center",
    paddingHorizontal: 15,
  },
  searchText: {
    color: Colors.text.placeholder,
  },
  content: {
    flex: 1,
    flexDirection: "row",
  },
  leftMenuContainer: {
    width: MENU_WIDTH,
    backgroundColor: Colors.background.secondary,
    borderRightWidth: 1,
    borderRightColor: Colors.border.light,
  },
  menuItem: {
    width: MENU_WIDTH,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 8,
    borderLeftWidth: 3,
    borderLeftColor: "transparent",
    backgroundColor: Colors.background.secondary,
  },
  menuItemActive: {
    backgroundColor: Colors.background.primary,
    borderLeftColor: Colors.primary,
  },
  menuText: {
    fontSize: 12,
    textAlign: "center",
    color: Colors.text.secondary,
    fontWeight: "400",
  },
  menuTextActive: {
    color: Colors.primary,
    fontWeight: "500",
  },
  rightContent: {
    flex: 1,
    backgroundColor: Colors.background.primary,
    shadowColor: "#000",
    shadowOffset: {
      width: -2,
      height: 0,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 3,
  },
  section: {
    marginBottom: 15,
  },
  sectionHeader: {
    padding: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: Colors.border.light,
  },
  sectionTitle: {
    fontSize: 15,
    fontWeight: "500",
    color: Colors.text.primary,
  },
  sectionContent: {
    flexDirection: "row",
    flexWrap: "wrap",
    paddingHorizontal: 5,
    paddingTop: 10,
  },
  sectionItem: {
    width: "33.33%",
    alignItems: "center",
    marginBottom: 15,
  },
  itemImage: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginBottom: 8,
    backgroundColor: Colors.background.tertiary,
  },
  itemText: {
    fontSize: 12,
    color: Colors.text.secondary,
    textAlign: "center",
  },
});
